<template>
    <div style="height: 150px;margin-top: 20px">
        <el-upload
                accept=".xlsx"
                :headers="headers"
                :on-success="handleUploadSuccess"
                class="upload-demo"
                action="/"
                :http-request="httpRequest"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList">
            <el-button :loading="loadBtn" type="primary">点击上传</el-button>
        </el-upload>
    </div>
</template>

<script>
import {importArea} from '@/api/moa/pension/record'

const {getToken} = require('@/utils/auth')
const {downloadFile} = require('@/api/download')
export default {
    name: 'ExcelImport',
    props: {
        url: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            fileList:[],
            loadBtn: false,
            headers: {
                Authorization: 'Bearer ' + getToken()
            },
        }
    },
    methods:{

        handleRemove(file, fileList) {
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`)
        },
        handleUploadSuccess(res) {
            if (res.code != 500) {
                downloadFile(res, '导入错误名单.xls')
                this.$emit("fetchList");
            }
        },
        handleDownload() {
            this.open = true
        },
        httpRequest(params) {
            this.loadBtn = true
            importArea(params.file,this.url).then(res => {
                if(res.code){
                    if (res.code != 200) {
                        this.$message.error(res.msg)
                    }else{
                        this.$message.success(res.msg)
                        this.$emit("fetchList");
                    }
                }else{
                    this.$message.success('导入成功，请查看导入错误名单')
                    this.handleUploadSuccess(res)
                }
            }).catch(err=>{
                console.log(err)
            }).finally(e => {
                this.loadBtn = false
            })
        }
    }
}
</script>

<style scoped>

</style>
